/**
 * @author:linjiye
 * @date: 2025/1/7
 * @desc:
 **/

import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React from 'react'
import {LinearGradient} from "expo-linear-gradient";

type Props = {}

const FcFileItem = ({item,style,onClickSelect,selectIcon,onClickPlay,onClick,children}: Props) => {
  const handleSelect = (val) => {
    onClickSelect && onClickSelect(val)
  }
  const handlePlay = (val) => {
    onClickPlay && onClickPlay(val)
  }

  const handleClick = (val) => {
    onClick && onClick(val)
  }
    return (
        <View style={[styles.item,style]}>
          {selectIcon &&
              <TouchableOpacity style={[styles.select_icon, item.isSelected && styles.select_active]}
                                onPress={() => handleSelect(item)}>
                {item.isSelected && <Text
                    style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
              </TouchableOpacity>
          }
          {item.thumbnail &&
              <TouchableOpacity style={styles.play_icon} onPress={() => handlePlay(item)}>
                <Text style={{fontFamily: 'FcIconFont',fontSize: 32,color: 'rgba(0,0,0,0.6)'}}>&#xe64e;</Text>
              </TouchableOpacity>
          }
          <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={() => handleClick(item)}>
            {!item.thumbnail && <Image style={styles.img} resizeMode={"cover"} source={item.url}></Image>}
            {item.thumbnail && <Image style={styles.img} resizeMode={"cover"} source={item.thumbnail}></Image>}
            <LinearGradient
                colors={['rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0.7)']} // 渐变色
                start={{x: 0, y: 0}}
                end={{x: 0, y: 1}}
                style={styles.gradient}
            >
              <Text style={styles.label}>标签：{item.labelNames || '无'}</Text>
            </LinearGradient>
          </TouchableOpacity>
          <>{children}</>
        </View>
    )
}

export default FcFileItem

const styles = StyleSheet.create({
  item: {
    flex: 1,
    borderRadius: 8,
    overflow: "hidden",
    position: "relative",
    margin: 4,
  },
  img: {
    width: '100%',
    height: '100%',
  },

  select_icon: {
    width: 20,
    height: 20,
    borderRadius: '50%',
    borderWidth: 1,
    borderColor: 'white',
    marginRight: 12,
    position: "absolute",
    top: 5,
    left: 5,
    zIndex: 10,
    // iOS 阴影样式
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    // Android 阴影样式
    elevation: 5,
  },
  select_active: {
    borderColor: '#2856FF',
    backgroundColor: '#2856FF',
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "center"
  },
  play_icon: {
    position: "absolute",
    top: '50%',
    left: '50%',
    zIndex: 100,
    marginLeft: -16,
    marginTop: -16,
  },
  gradient: {
    width: '100%',
    // height: 46,
    position: 'absolute',
    bottom: 0,
    left: 0,
    flexDirection: "row",
    alignItems: "center"
  },
  label: {
    paddingHorizontal: 8,
    color: 'white',
    fontSize: 12,
    lineHeight: 18,
    paddingVertical: 6
  },
})